<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Account Profile</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>
<body>
<span th:fragment="mfadevices">
        <script type="text/javascript">
            ((material, bootstrap) => {
                document.addEventListener('DOMContentLoaded', () => {
                    $('#mfaDevicesTable').DataTable();
                    let dialogId = 'mfaDevice-dialog';
                    let dialog = material ?
                        material.dialog.MDCDialog.attachTo(document.getElementById(dialogId)) :
                        new bootstrap.Modal(document.getElementById(dialogId), {});
                    document.getElementsByName("viewMfaDeviceDetails").forEach(btn => {
                        btn.addEventListener('click', event => {
                            let caller = event.target || event.srcElement;
                            let json = $(caller).next("span").text().trim();
                            $("#mfaDeviceDetails").text(json);
                            hljs.highlightAll();
                            dialog[material ? 'open' : 'show']();
                            event.preventDefault();
                        }, false);
                    });
                });
            })(window.mdc ? mdc : null, window.bootstrap ? bootstrap : null);
        </script>
        <div class="mdc-dialog modal" id="mfaDevice-dialog" role="alertdialog"
             aria-modal="true" aria-labelledby="mfa-dialog-title" aria-describedby="mfa-dialog-content">
            <div class="mdc-dialog__container w-100 modal-dialog">
                <div class="mdc-dialog__surface mw-100 modal-content">
                    <h1 class="mdc-dialog__title mt-lg-2 modal-header" id="mfa-dialog-title"
                        th:utext="#{screen.account.mfadevices.devicepanel.title}"></h1>
                    <div class="mdc-dialog__content modal-body" id="mfa-dialog-content">
                        <p th:utext="#{screen.account.mfadevices.devicepanel.text}"></p>
                        <pre><code id="mfaDeviceDetails" class="border-rounded language-json">Text</code></pre>
                    </div>
                    <footer class="mdc-dialog__actions modal-footer">
                        <button type="button" class="mdc-button mdc-button--outline btn btn-outline-secondary"
                                data-mdc-dialog-action="accept" data-mdc-dialog-button-default data-bs-dismiss="modal">
                        <span class="mdc-button__label">Close</span>
                        </button>
                    </footer>
                </div>
            </div>
            <div class="mdc-dialog__scrim"></div>
        </div>

        <div id="divMfaRegisteredAccounts"
             th:if="${multifactorRegisteredAccounts}"
             class="profile-content w-100"
             style="display: none;">
            <h2>
                <i class="mdi mdi-account-reactivate fas fa-door-open" aria-hidden="true"></i>
                <span th:utext="#{screen.account.mfadevices.title}">Multifactor Devices</span>
            </h2>
            <p th:utext="#{screen.account.mfadevices.subtitle}">MFA Devices are listed here</p>
            <table id="mfaDevicesTable" class="mdc-data-table__table table table-striped noborder">
                <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Source</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">ID</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Name</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Type</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Model</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Number</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col"></th>
                    </tr>
                </thead>
                <tbody class="mdc-data-table__content">
                    <tr th:each="entry : ${multifactorRegisteredAccounts}" class="mdc-data-table__row">
                        <td class="mdc-data-table__cell">
                            <span th:switch="${entry.source}">
                                <span th:case="'Google Authenticator'"><i class="mdi mdi-google" aria-hidden="true"></i></span>
                                <span th:case="'Web Authn'"><i class="mdi mdi-fingerprint" aria-hidden="true"></i></span>
                                <span th:case="'Duo Security'"><i class="mdi mdi-security"></i></span>
                                <span th:case="'YubiKey'"><i class="mdi mdi-usb-flash-drive"></i></span>
                                <span th:case="*"></span>
                            </span>
                            <span th:utext="${entry.source}"/>
                        </td>
                        <td class="mdc-data-table__cell"><code th:utext="${entry.id}">Value</code></td>
                        <td class="mdc-data-table__cell" th:utext="${entry.name}">Value</td>
                        <td class="mdc-data-table__cell" th:title="${entry.type}"
                            th:utext="*{entry.type}?: 'N/A'">Value</td>
                        <td class="mdc-data-table__cell" th:title="${entry.model}"
                            th:utext="*{entry.model}?: 'N/A'">Value</td>
                        <td class="mdc-data-table__cell" th:title="${entry.number}"
                            th:utext="*{entry.number}?: 'N/A'">Value</td>
                        <td class="mdc-data-table__cell">
                            <button type="button" name="viewMfaDeviceDetails" href="#" th:if="${entry.payload}"
                                    class="mdc-button mdc-button--raised me-2 btn btn-link min-width-48x">
                            <i class="mdi mdi-account-details fas fa-eye min-width-48x" aria-hidden="true"></i>
                            <span style="display: none" th:utext="${entry.payload}"/>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div th:if="${#bools.isTrue(gauthAccountProfileRegistrationEnabled) || #bools.isTrue(webauthnAccountProfileRegistrationEnabled)}">
                <hr>

                <p th:utext="#{screen.authentication.gauth.reganotherdevice}"></p>
                <div id="toolbar" class="mdc-menu-surface--anchor">
                    <button id="register" name="register" accesskey="r" value="Register" type="button"
                            class="mdc-button mdc-button--raised mdc-button--leading btn btn-primary me-2"
                            onclick="initializeMenus();">
                        <span class="mdc-button__ripple"></span>
                        <i class="mdi mdi-arrow-down" aria-hidden="true"></i>
                        <span class="mdc-button__label" th:utext="#{screen.welcome.button.register}"></span>
                    </button>
                    <form method="post" id="fm2" th:action="@{${'/' + activeFlowId} }">
                        <div class="mdc-menu mdc-menu-surface mw-25">
                            <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
                                <li class="mdc-list-item" role="menuitem" th:if="${gauthAccountProfileRegistrationEnabled}">
                                    <span class="mdc-list-item__ripple"></span>
                                    <i class="mdi mdi-google fas fa-google" style="margin-top: 2px;" aria-hidden="true"></i>
                                    <div class="text-justify">
                                        <h4 th:utext="#{cas.mfa.providerselection.mfa-gauth}"/>
                                        <span th:text="#{cas.mfa.providerselection.mfa-gauth.notes}"/>
                                        <p></p>
                                        <i class="mdi mdi-arrow-right" aria-hidden="true"></i>
                                        <a id="gauthRegistrationLink"
                                           href="#" th:utext="#{screen.welcome.button.register}"
                                           onclick="submitRegistrationRequest('gauth');"/>
                                    </div>
                                </li>
                                <li class="mdc-list-item" role="menuitem" style="margin-top: 10px;" th:if="${webauthnAccountProfileRegistrationEnabled}">
                                    <span class="mdc-list-item__ripple"></span>
                                    <i class="mdi mdi-fingerprint" aria-hidden="true"></i>
                                    <div class="text-justify">
                                        <h4 th:utext="#{cas.mfa.providerselection.mfa-webauthn}"
                                            style="margin-top: 2px;"/>
                                        <span th:text="#{cas.mfa.providerselection.mfa-webauthn.notes}"/>
                                            <p></p>
                                            <i class="mdi mdi-arrow-right" aria-hidden="true"></i>
                                            <a id="webauthnRegistrationLink"
                                               href="#" th:utext="#{screen.welcome.button.register}"
                                               onclick="submitRegistrationRequest('webauthn');"/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <input type="hidden" name="type" value=""/>
                        <input type="hidden" name="_eventId_register" value="Register"/>
                        <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                    </form>

                    <script type="text/javascript" th:inline="javascript">
                        function initializeMenus() {
                            cas.openMenu();
                        }

                        function submitRegistrationRequest(type) {
                            document.forms.fm2.type.value = type;
                            document.forms.fm2.submit();
                        }
                    </script>
                </div>
            </div>
        </div>

</span>
</body>
</html>
